{% extends "base.html" %}
{% block extra_js %}
<link rel="stylesheet" href="/static/date_input.css" type="text/css">

<script src="{{ media_url }}/jquery.js" type="text/javascript"></script>
<script src="{{ media_url }}/jquery.autogrow.js" type="text/javascript"></script>
<script src="{{ media_url }}/jquery.date_input.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready (function() {
    $('.autogrow').each(function (i) { $(this).autogrow() });
});
$.extend(DateInput.DEFAULT_OPTS, {
    stringToDate: function(string) {
        var matches;
        if (matches = string.match(/^(\d{4,4})-(\d{2,2})-(\d{2,2})$/)) {
            return new Date(matches[1], matches[2] - 1, matches[3]);
        } else {
            return null;
        };
    },

    dateToString: function(date) {
        var month = (date.getMonth() + 1).toString();
        var dom = date.getDate().toString();
        if (month.length == 1) month = "0" + month;
        if (dom.length == 1) dom = "0" + dom;

        return date.getFullYear() + "-" + month + "-" + dom;
    }
});
$($.date_input.initialize);
</script>
{% endblock %}

{% block content %}
<a href="/tasks/">« Back to tasks</a>

<form id="tasks_single" method="post" action="/tasks/edit/{{ task.id }}/">
    <div id="action-area">
        <input type="reset"  value="Cancel" class="revert-button" />
        <input type="submit" value="Save changes" class="save-button" />
    </div>

    <label for="id_title" style="display: none">Title</label>
    {{ form.title }} 
    <br/>

    <label for="id_body" style="display: none">Body</label>
    {{ form.body }}
    <br/>

    <label for="id_due">Due</label>
    {{ form.due }}
    <br/>
    <label for="id_responsible">Responsible</label>
    {{ form.responsible }}
    <br/>
</form>
<br/>
{% endblock %}
